<template>
    <transition name='modal'>
        <div class="modal-transition modal-mask notification" v-if="this.modalShow.show" @click='hideModal'>
            <div class="modal-confirm clearfix" @click='prevent'>
                <div class="modal-content clearfix">
                    <!--头部-->
                    <slot name="header">
                        <div class="modal-header">
                            <div class="title">{{this.title}}</div>
                            <div class="close" @click='hideModal'>
                                ×
                            </div>
                        </div>
                    </slot>
                    <!--内容区域-->
                    <div class="modal-body clearfix">
                        <slot name="body">
                            <div class="input-group" v-for='(value, key) in paramsname'>
                              <div class="point">
                              </div>
                              <div class="keys">
                                {{value[0]}}
                              </div>
                              <input type="text" name="" v-model='params[key]' :placeholder='message[key]' v-if='key !== "type"'>
                              <div class="yz-btn" @click='mobileRegister()' v-if='key === "mobile"' :class='dianhua ? "" : "tongguo"'>
                                <a>{{ dianhua ? '验证' : '重发'}}</a>
                              </div>
                              <div class="error" v-if='ruls[key]'>
                                必填信息不能为空
                              </div>
                            </div>
                            <div class="circle" :class='radio ? "" : "nocheck"' @click='checkradio()'>

                            </div>
                            <div class="detail">
                              以上信息必须与申领信用卡的信息一致
                            </div>
                        </slot>
                    </div>
                    <!--尾部,操作按钮-->
                    <div class="modal-footer">
                        <slot name="button">
                            <div class="btn-info" :class='radio ? "hover" : ""' @click='submitParam()'>确 定</div>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: ['modalShow', 'title', 'from', 'code'],
    data () {
        return {
          params: {
            name: '',
            mobile: '',
            mcode: ''
          },
          paramsname: {
            name: ['姓名'],
            mobile: ['电话'],
            mcode: ['验证码']
          },
          dianhua: true,
          radio: false,
          ruls: {
            name: false,
            mobile: false,
            mcode: false
          },
          message: {
            name: '请填写您的姓名',
            mobile: '请填写您的手机号码',
            mcode: '请填写您的验证码'
          }
        }
    },
    mounted () {
    },
    methods: {
        prevent (e) {
          e.stopPropagation() // 阻止冒泡
        },
        hideModal () {
          this.$set(this.modalShow, 'show', false)
        },
        submitParam () {
            this.$http('post', 'index.html',  {...this.params, from: this.from, code: this.code})
            .then((data) => {
              if (data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '申请成功！',
                  showClose: true
                })
                setTimeout(function(){
                  window.location = data.result
                })
                this.hideModal()
              } else {
                this.$message({
                  type: 'error',
                  message: data.result,
                  showClose: true
                })
              }
            })
        },
        mobileRegister () {
          this.$http('post', 'sms.html', { mobile: this.params.mobile})
          .then((data) => {
            if (data.code === 1) {
              this.$message({
                type: 'success',
                message: '短信已发送哟~亲~',
                showClose: true
              })
              this.dianhua = false
            } else {
              this.$message({
                type: 'error',
                message: data.result,
                showClose: true
              })
            }
          })
        },
        checkradio () {
          for (let key in this.params) {
            if (this.params[key] === "") {
              this.ruls[key] = true
              return
            } else {
              this.ruls[key] = false
            }
          }
          this.$set(this, 'radio', !this.radio)
        }
    }
}
</script>

<style>
.modal-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(55,55,55,.6);
    z-index: 100;
    display: flex;
    align-items: center;
    color: #333;
    justify-content: center;
}
.modal-confirm{
    background-color: white;
    border-radius: 5px;
    width: 22rem;
}
.modal-header{
    font-size: 16px;
    color: white;
    background-color: #fa915a;
    height: 3.333333rem;
    line-height: 3.333333rem;
    text-align: center;
    position: relative;
}
.close{
  position: absolute;
  right: .666667rem;
  top: -.666667rem;
  font-size: 20px;
}
.modal-body{
    padding: 1.333333rem 1rem .6rem 3rem;
    box-sizing: border-box;
}
.input-group{
  position: relative;
}
.input-group + .circle{
  margin-left: 1rem;
  float: left;
  margin-top: .8rem;
  opacity: 1;
  background-color: #f9905a;
  margin-right: 1.666667rem;
}
.circle + .detail{
  font-size: 10px;
  color: #999;
  float: left;
  margin-top: .8rem;
}
.circle.nocheck{
  background: white;
  border: 1px solid #d4d4d4;
  box-sizing: border-box;
}
.modal-footer{
    text-align: center;
    padding-bottom: 1.333333rem;
}
.modal-enter-active {
    transition: all .3s ease;
}
.modal-leave-active{
    transition: all .3s ease;
}
.modal-enter,
.modal-leave-active {
    opacity: 0;
    transform: scale(1.5);
}
.point{
  width: .4rem;
  height: .4rem;
  background-color: #fa915a;
  border-radius: 50%;
  float: left;
  margin-top: .7666666rem;
  margin-right: .6rem;
}
input,select{
  border: solid 1px #e4e3e3;
  border-radius: 2px;
  height: 1.6rem;
  width: 9rem;
  background-color: white;
  color: #c8c8c8;
  font-size: 12px;
}
input{
  color: #666;
  -webkit-appearance: none;
}
select{
  height: 1.866667rem;
  padding-left: .333333rem;
  box-sizing: content-box;
}
.keys{
  float: left;
  margin-right: 1.333333rem;
  line-height: 1.866667rem;
}
.btn-info{
  border-radius: 4px;
  background-color: #e3e3e3;
  width: 15rem;
  height: 2.4rem;
  margin: 0 auto;
  color: #999;
  font-size: 16px;
  line-height: 2.4rem;
}
.input-group + .input-group{
  margin-top: 1.333333rem;
}
input[placeholder]{
  padding-left: .333333rem;
  font-size: 12px;
}
::-webkit-input-placeholder {
  color: #c8c8c8;
}
.btn-info.hover{
  background-color: #fa915a;
  color: white;
}
.error{
  color: #ff7b7b;
  position: absolute;
  font-size: 12px;
  right: 2.533333rem;
}
</style>
